<template>
	 <uni-nav-bar title="积分" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	 <view class="integral">
		 <view class="center top_integral"><text>可用积分</text><text>{{integralAll}}</text></view>
	 </view>
	 <view class="package datas" style="padding: 10rpx;">
	   <uni-datetime-picker
	     v-model="range"
	     type="daterange"
	     :border="false"
	     :clear-icon="false"
	     rangeSeparator="至"
	     @change="change"
	   />
	 </view>
	 <view class="package">
		 <view class="totalAlls" @click="open()">
		   <text>{{ SceneName }}</text>
		   <image src="../../static/account/account-arrow-down.png" mode=""></image>
		 </view>
		 <scroll-view
		   scroll-y="true"
		   enable-back-to-top
		   @scrolltolower="loadMore"
		   class="scroll-box"
		   :style="{ height: pageHeight + 'px' }"
		 >
		 		 <view class="space-between inteList" v-for="(item, index) in orderLists" :key="index">
		 			 <view>
		 				 <text>{{ item.memo }}</text>
		 				  <text>{{ item.createtime }}</text>
		 			 </view>
		 			 <view>{{ item.score }}</view>
		 		 </view>
		 		 <view v-if="orderLists.length < 1" class="fillings" :style="{ height: pageHeight + 'px' }">
		 		   <image :src="Empty2"></image>
		 		   <text>暂无记录</text>
		 		 </view>
		 </scroll-view>
	 </view>
	 <!-- 筛选弹框 -->
	 <uni-popup ref="FilterPopup" type="bottom" :is-mask-click="false">
	   <view class="Filter">
	     <view class="filter_text">
	       <uni-icons type="closeempty" size="26" @click="close()"></uni-icons>
	       <text>选择筛选项</text>
	       <text></text>
	     </view>
	     <scroll-view :scroll-y="true" style="height: 35vh;">
	       <view class="filter_list">
	         <text
	           v-for="(item, index) in SceneList"
	           :key="index"
	           @click="changeAccount(item.name, item.type)"
	           :style="{
	             background: SceneName == item.name ? '#1B91FF ' : '',
	             color: SceneName == item.name ? '#fff' : '',
	           }"
	         >
	           {{ item.name }}
	         </text>
	       </view>
	     </scroll-view>
	   </view>
	 </uni-popup>
</template>

<script setup lang="ts">
	import { navBack } from '@/utils/navigator';
	import { format, subDays } from 'date-fns';
	import { getDriverID } from '@/stores/driverID';
	import { integralList } from '@/gql/user';
	import { integralS } from '@/gql/integral';
	import { toPublish } from '@mqtt';
	import { onShow } from '@dcloudio/uni-app';
	import { onMounted, ref } from 'vue';
	import { Empty2} from '@/utils/Static';
  /**
   * 积分主页
   * @param SceneName  积分类型名称
   * @param SceneList  积分类型列表
   * @param FilterPopup  积分类型赛选框值
   * @param driver_id  用户ID
   * @param orderLists  积分记录列表
   * @param isLoading  上拉加载状态
   * @param lastPage  积分总页数
   * @param currentPage  当前获取页数
   * @param integralAll  可用积分
   * @param count  累计积分
   * @param pageHeight  积分列表高度
   * @param type  积分类型type值
   * @return
   */
	const SceneName = ref('');
	const SceneList = ref([]);
	// data
	const now = new Date();
	let end = format(now, 'yyyy-MM-dd');
	const daysAgo = subDays(now, 6);
	let start = format(daysAgo, 'yyyy-MM-dd');
	const range = ref([start, end]);
	const FilterPopup = ref(null);
	
	
	const driver_id = getDriverID();
	const orderLists = ref([]);
	const isLoading = ref(false);
	const lastPage = ref(1);
	const currentPage = ref(1);
	const integralAll = ref('');
	const count = ref('');
	const pageHeight = ref('');
	const type=ref('')
	onMounted(() => {
	  uni.getSystemInfo({
	    success: function(res) {
	      pageHeight.value = (res.windowHeight - 230).toString();
	    },
	  });
	});
	onShow(()=>{
		orderLists.value=[]
		currentPage.value=1
		init()
	})
  /**
   * 初始化获取积分数据信息
   * @param SceneName  积分类型名称
   * @param SceneList  积分类型列表
   * @return 获取当前类型的积分列表
   */
	function init(){
		const payload = {
		  query: integralS,
		};
		toPublish('ql/driver/scoreType', payload, (obj: any) => {
		  const { score_type } = obj.data;
		  SceneList.value = score_type;
		  SceneName.value = score_type.length>0?score_type[0].name:'全部积分';
		  type.value=score_type.length>0?score_type[0].type:''
		  integral();
		});
	}
	
	/**
	 * 获取积分页面信息
   * @param driver_id  用户ID
   * @param page  当前页数
   * @param start  开始时间
   * @param end  结束时间
   * @param type  分类值
   * @param isLoading  加载状态
   * @param integralAll  可用积分
   * @param orderLists  积分记录列表
   * @param lastPage  积分总页数
   * @param count  累计积分
	 */
	function integral() {
	  isLoading.value = true;
	  const payload = {
	    query: integralList,
	    variables: {
	      driver_id,
	      page: currentPage.value,
	      start,
	      end,
		    type:type.value
	    },
	  };
	  toPublish('ql/driver/scorelogList', payload, (obj: any) => {
	    const { scorelog_list } = obj.data;
	    isLoading.value = false;
	    integralAll.value = scorelog_list.score;
	    orderLists.value = [...orderLists.value, ...scorelog_list.list];
	    lastPage.value = scorelog_list.lastpage;
	    count.value = scorelog_list.count;
	  });
	}
	/**
	 * 加载更多
	 */
	function loadMore() {
	  if (currentPage.value < lastPage.value) {
	    currentPage.value++;
	    integral();
	  }
	}
	/**
	 * 时间筛选
   * @param currentPage  当前页数
   * @param orderLists  清空积分列表
   * @param start  开始时间
   * @param end  结束时间
   * @return 再次获取积分列表数据
	 */
	function change([sta, en]) {
	  currentPage.value = 1;
	  orderLists.value = [];
	  start = sta;
	  end = en;
	  integral();
	}
  /**
   * 类型筛选
   * @param type  类型值
   * @param SceneName  类型名称
   * @param currentPage  当前页数
   * @param orderLists  清空积分列表
   * @return 再次获取积分列表数据 关闭类型弹框
   */
	function changeAccount(name,ty){
		type.value=ty
		SceneName.value=name
		currentPage.value = 1;
		orderLists.value = [];
		integral();
		close()
	}
  /**
   * 打开类型弹框
   */
	function open() {
	  FilterPopup.value.open();
	}
  /**
   * 关闭类型弹框
   */
	function close() {
	  FilterPopup.value.close();
	}
</script>

<style scoped lang="less">
@import url('../pointsMall/less/integral.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>